<template>
	<view>
		<waterfallAndSearch  :search='pageObj.query' :list="list" @ReachBottom='ReachBottom' @lower='lower' @searchOK='searchOK'></waterfallAndSearch>
	</view>
</template>

<script>
	import waterfallAndSearch from './components/waterfallAndSearch.vue';
	export default {
		data() {
			return {
				list:[],
				pageObj: {
					num: 1,
					page: 20,
					query: '',
				},
			}
		},
		components:{waterfallAndSearch},
		onLoad(d) {
			this.pageObj.query = d.s
			this.search()
		},
		onHide() {
			
		},
		methods:{
			ReachBottom(){
				if (this.pageObj.num <= this.pageObj.total) return
				this.pageObj.num++;
				this.search()
				
			},
			async search(){
			let s = [];
			 const data = await	this.http(this.api.PexelsApiImageSearch, this.pageObj)
			 
			 const obj = {total: data.total_results}
			 this.pageObj = {...this.pageObj,...obj}
			 data.photos.forEach((item, index) => {
			 	s.push({
			 		"id": this.list.length + index,
			 		"image": item.src.large2x,
			 		"content": item.alt,
			 		source:item
			 	})
			 })
			 this.list = [...this.list, ...s];
			 uni.stopPullDownRefresh();
			},
			searchOK(d) {
				this.keyword = d;
				this.pageObj.query =d
				this.pageObj.query = d;
				this.pageObj.page = 20;
				this.list = [];
				this.search()
			},
		}
	}
</script>

<style>
</style>
